import React, { useState, useEffect } from 'react';
import './styles.css';
import HelloWorld from './components/HelloWorld';
import Counter from './components/Counter';
import PropsDemo from './components/PropsDemo';
import LifecycleDemo from './components/LifecycleDemo';

function Demo1() {
  return (
    <div className="demo1-container">
      <h1 className="demo1-title">React 基础语法 Demo</h1>
      
      <section className="demo1-section">
        <h2>1. JSX 语法 - Hello World</h2>
        <p className="demo1-description">
          JSX 是 JavaScript 的语法扩展，允许我们在 JavaScript 中编写类似 HTML 的代码。
        </p>
        <div className="demo1-example">
          <HelloWorld />
        </div>
      </section>
      
      <section className="demo1-section">
        <h2>2. Props 传递数据</h2>
        <p className="demo1-description">
          Props 是从父组件向子组件传递数据的方式。
        </p>
        <div className="demo1-example">
          <PropsDemo 
            name="React 学习者" 
            skills={['HTML', 'CSS', 'JavaScript']} 
            isActive={true}
          />
        </div>
      </section>
      
      <section className="demo1-section">
        <h2>3. State 状态管理</h2>
        <p className="demo1-description">
          State 是组件内部的状态，当状态改变时，组件会重新渲染。
        </p>
        <div className="demo1-example">
          <Counter />
        </div>
      </section>
      
      <section className="demo1-section">
        <h2>4. 组件生命周期</h2>
        <p className="demo1-description">
          组件生命周期包括挂载(Mount)、更新(Update)和卸载(Unmount)三个阶段。
        </p>
        <div className="demo1-example">
          <LifecycleDemo />
        </div>
      </section>
    </div>
  );
}

export default Demo1; 